/* 
  学习目标：性能优化-避免不必要的渲染-shouldComponentUpdate
*/
import React from 'react';
export default class App extends React.Component {
  state = {
    count: 0,
    msg: 'hello React',
  };

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  handleMsg = () => {
    this.setState({ msg: Math.random() + '' });
  };

  render() {
    return (
      <div>
        <h1>数量： {this.state.count}</h1>
        <button onClick={this.handleClick}>点我修改数量</button>
        <button onClick={this.handleMsg}>点我修改msg</button>
        <Footer msg={this.state.msg}></Footer>
      </div>
    );
  }
}

class Footer extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    console.log('shouldComponentUpdate被执行了');
    // 注意：
    // 返回true表示告诉React更新组件
    // 返回false表示告诉React组件不更新

    // 如果nextProps.msg与this.props.msg相等的时候，不要更新
    // 如果nextProps.msg与this.props.msg不相等的时候，要更新
    console.log(nextProps.msg, this.props.msg);
    if (nextProps.msg !== this.props.msg) {
      return true;
    } else {
      return false;
    }
  }

  render() {
    console.log('Footer被刷新了');
    return <div>{this.props.msg}</div>;
  }
}
